<template>
    <view class="container">
        <view class="user">
            <!-- #ifdef MP-WEIXIN -->
            <view class="left">
                <view class="nickname" v-if="business.nickname">{{business.nickname}}</view>
                <!-- 微信小程序开发能力标签 获取微信昵称 -->
                <open-data v-else type="userNickName" class="nickname"></open-data>
            </view>
            <view class="right">
                <view class="avatar xcx">
                    <uv-avatar :src="business.avatar_text" size="90" v-if="business.avatar_text"></uv-avatar>
                    <!-- 没有登录的时候 默认显示微信的开发信息 -->
                    <open-data v-else type="userAvatarUrl"></open-data>    
                </view>
            </view>
            <!-- #endif -->
            
            <!-- #ifdef H5 || APP-PLUS -->
            <view class="left">
                <view class="nickname" v-if="business.nickname">{{business.nickname}}</view>
                <view class="nickname" v-else>请先登录</view>
            </view>
            <view class="right">
                <view class="avatar">
                    <uv-avatar :src="business.avatar_text" size="90" v-if="business.avatar_text"></uv-avatar>
                    <uv-avatar src="/static/images/avatar.jpg" size="90" v-else></uv-avatar>
                </view>
            </view>
            <!-- #endif -->
        </view>
        
        <!-- 菜单 对象不为空就说明有登录-->
        <view class="menu" v-if="Object.getOwnPropertyNames(business).length > 0">
            <view class="item" hover-class="checkActive" @click="ToProductList">
                <view class="title">产品防伪管理</view>
                <uv-icon name="arrow-right"></uv-icon>
            </view>

            <!--  #ifdef MP-WEIXIN -->
            <view class="item" hover-class="checkActive" @click="unBind.open()">
                <view class="title">解除绑定账号</view>
                <uv-icon name="arrow-right"></uv-icon>
            </view>
            <!-- #endif -->

            <view class="item" hover-class="checkActive" @click="logout.open()">
                <view class="title">退出账号</view>
                <uv-icon name="arrow-right"></uv-icon>
            </view>
        </view>
        
        <!-- 登录按钮 -->
        <view class="actions">
            <!-- #ifdef MP-WEIXIN -->
            <view class="login">
                <uv-button
                    v-if="Object.getOwnPropertyNames(business).length <= 0"
                    color="linear-gradient(to right, rgb(13, 101, 216), rgb(0, 179, 255))"
                    iconColor="#fff" iconSize="25" icon="weixin-circle-fill" @click="OnWxLogin">
                    微信一键登录
                </uv-button>
            </view>
            <!-- #endif -->
            
            <!-- #ifdef APP-PLUS || H5 -->
            <view class="login">
                <uv-button type="primary" v-if="Object.getOwnPropertyNames(business).length <= 0" @click="toLogin">登录账号</uv-button>
            </view>
            <!-- #endif -->
        </view>
    </view>
    
    <!-- 确认对话框 -->
    <uv-modal ref="logout" title="退出提醒" content="是否确认退出" :showCancelButton="true" @confirm="ToLogout" @cancel="logout.close()"></uv-modal>
    
    <uv-modal ref="unBind" title="温馨提醒" content="是否确认解除账号绑定" :showCancelButton="true" @confirm="ConfirmUnbind" @cancel="unBind.close()"></uv-modal>
    
    <!-- 消息提示 -->
    <uv-toast ref="notice"></uv-toast>
</template>

<script setup>

    const {proxy} = getCurrentInstance()
    
    let business = proxy.$business
    let logout = ref()
    let unBind = ref()
    let notice = ref()
    
    onShow(() => business = proxy.$business)
    
    // H5 与 APP进行登录
    const toLogin = () => uni.$uv.route('/pages/business/login')
    
    // 微信一键登录
    const OnWxLogin = () => {
        uni.login({
            provider: 'weixin',   //服务商
            scopes: 'auth_user',  // 授权方式
            onlyAuthorize: true,  // 授权认证
            success: async (res) => {
                // 临时登录凭证
                let code = res.code ? res.code : ''
                
                if(!code)
                {
                    notice.value.show({
                        type: 'error',
                        icon: 'close-circle',
                        message: '未获取到临时凭证code'
                    })
                    return false
                }
                
                let result = await uni.$uv.http.post('/business/WxLogin', {code})
                
                if(result.code == 0)
                {
                    notice.value.show({
                        type: 'error',
                        icon: 'close-circle',
                        message: result.msg
                    })
                    return false
                }
                
                let action = result.data.action ?? ''
                let openid = result.data.openid ?? ''
                
                // 未绑定过账号
                if(action == 'bind')
                {
                    notice.value.show({
                        type: 'success',
                        message: result.msg,
                        complete: () => {
                            uni.$uv.route({
                                url: '/pages/business/bind',
                                params: {openid}
                            })
                        }
                    })
                    
                    return false
                }
                
                // 有绑定过
                uni.setStorageSync('business', result.data)
                proxy.$business.value = result.data
                business.value = result.data
                
                notice.value.show({
                    type: 'success',
                    message: result.msg
                })
            },
            fail: (err) => {
                console.log(err)
                notice.value.show({
                    type: 'error',
                    icon: 'close-circle',
                    message: '授权失败'
                })
            }
        })
    }
    
    // 产品防伪管理
    const ToProductList = () => uni.$uv.route('/pages/business/list')
    
    // 解除账号绑定
    const ConfirmUnbind = async () => {
        let params = {
            mobile: business.value.mobile,
            id: business.value.id
        }
        
        let result = await uni.$uv.http.post('/business/UnBind', params)
        
        if(result.code == 0)
        {
            notice.value.show({
                type: 'error',
                icon: 'close-circle',
                message: result.msg
            })
            return false
        }
        
        notice.value.show({
            type: 'success',
            message: result.msg
        })
        
        ToLogout()
    }
    
    // 退出登录
    const ToLogout = () => {
        // 清空缓存
        uni.removeStorageSync('business')
        proxy.$business.value = {}
        business.value = {}
    }
</script>

<style>
	page {
		background-color: #eee;
	}

	.container {
		width: 95%;
		margin: 0 auto;
	}

	.user {
		display: flex;
		padding: 40px;
		background-color: #fff;
		margin-top: 10px;
		border-radius: 10px;
	}

	/* #ifdef H5  */
	.user {
		align-items: center;
	}

	/* #endif */

	.user .left {
		flex: 3;
	}

	/* 条件编译 */
	/* #ifdef MP-WEIXIN  */
	.user .left {
		flex: 3;
		display: flex;
		align-items: center;
		align-content: center;
	}

	/* #endif */


	.user .right {
		flex: 1
	}

	.user .right .xcx {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		overflow: hidden;
	}

	.user .left .nickname {
		font-size: 26px;
		font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
	}

	.actions {
		display: flex;
		padding: 20px 40rpx;
	}

	.login {
		flex: 1;
	}

	.menu {
		background-color: #fff;
		margin-top: 10px;
	}

	.menu .item {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		padding: 10px 10px;
		font-size: 14px;
	}

	.checkActive {
		background-color: rgba(233, 233, 233, 0.5);
	}
</style>
